<template>
    <div class="relative onlyHeight flex gap-4  justify-center items-center perspective-container">
        <div ref="theBall" v-for="i in 1" :key="i" class="flex gap-4 bg-black p-[2px] aspect-square rounded-full">
            <ForwardCard v-for="j in 1" :key="`${i}-${j}`"
                class="text-4xl font-bold rounded-md p-4 bg-white bg-opacity-50 border-grey-500 border-[2px] shadow-lg backdrop-blur-[5px]">
                <div class="w-full h-full flex justify-center items-center ">
                    Be Better，{{ userStore.user?.username }}！
                </div>
            </ForwardCard>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '~/stores/user'

const userStore = useUserStore()

// 添加认证中间件
definePageMeta({
    middleware: 'auth',
    name: 'Home'
})
</script>
